<template>
  <div class="Tui">
    <div class="banner">
      <Banners :banners="banners"></Banners>
    </div>
    <Cells :cells="cells"></Cells>
    <div class="multi">
      <div class="multi-left">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/29b39579739d82269d18f0e7c8f6c9da.jpg?f=webp&w=537&h=762&bg=57524C"
          alt=""
        />
      </div>
      <div class="multi-right-top">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5b9af94e5c05bb2b4849cbb113eddb9d.jpg?f=webp&w=537&h=378&bg=EBF8FF"
          alt=""
        />
      </div>
      <div class="multi-right-bot">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a12873ff30a6da401d74728878625c37.jpg?f=webp&w=537&h=378&bg=D2EDFF"
          alt=""
        />
      </div>
    </div>
    <Cells2 :cells2="cells2"></Cells2>
  </div>
</template>

<script>
import instance from "../../../api/request";
import Banners from "../Banners";
import Cells from "./public-coms/Cells";
import Cells2 from "./public-coms/Cells2";
export default {
  name: "Tui",
  data() {
    return {
      banners: [],
      cells: [],
      cells2: [],
    };
  },
  methods: {
    async fn_api() {
      let { data } = await instance.get("/index.json");
      let tui = data.home.tui;
      this.banners = tui.banners;
      this.cells = tui.cells;
      this.cells2 = tui.cells2;
    },
  },
  created() {
    this.fn_api();
  },
  components: {
    Banners,
    Cells,
    Cells2,
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: 7.2rem;
  height: 3.6rem;
}
.multi {
  width: 7.2rem;
  height: 5.08rem;
  position: relative;
  margin-bottom: 0.16rem;
  .multi-left {
    position: absolute;
    width: 3.58rem;
  }
  .multi-right-top {
    position: absolute;
    width: 3.58rem;
    left: 3.62rem;
  }
  .multi-right-bot {
    position: absolute;
    width: 3.58rem;
    left: 3.62rem;
    top: 2.56rem;
  }
  img{
    width: 100%;
    height: 100%;
  }
}
</style>